<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
	<meta name="renderer" content="webkit">

	<link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
	<link rel="stylesheet" href="css/index.css" />
	<script type="text/javascript" src="../common/jquery-3.7.1.js"></script>
	<title>架次配套缺料看板</title>
</head>

<body>
	<div class="border-container">
		<div class="name-title tile-size-color">
			架次配套缺料看板
		</div>
		<div class="process-table">
			<div class="process-th">
				<span style="width: 33.33%;">机型</span>
				<span style="width: 33.33%;">架次</span>
				<span style="width: 33.33%;">缺料AO数</span>
			</div>
			<div class="process-td">
				<!-- <ul class="list"></ul> -->
			</div>
		</div>
	</div>
	<script type="text/javascript">
		document.addEventListener('DOMContentLoaded', function () {
			let scrollInterval;
			const aircraftModels = [
				'JF-17', 'FC-31', 'KJ-2000', 'Y-20', 'ARJ21', 'AG600', 'WZ-8', 'QW-9', 'JH-7', 'JH-11'
			];

			const fetchData = () => {
				return new Promise((resolve, reject) => {
					$.ajax({
						url: '/les/BillboardReportController/getMissingMaterials',
						type: 'GET',
						dataType: 'json',
						success: function (res) {
							if (res.retCode === '200') {
								resolve(res.responseBody);
							} else {
								reject(new Error(res.message));
							}
						},
						error: function (xhr, status, error) {
							reject(error);
						}
					});
				});
			};

			const updateTable = (processList) => {
				let processHtml = '<ul class="list">';
				processList.forEach(element => {
					const rowClass = ''; // element.taskState === '未完成' ? 'red-row' : '';
					processHtml += `<li class="item ${rowClass}">
			<span style="width:33.33%;">${element.millType}</span>
			<span style="width:33.33%;">${element.sortie}</span>
			<span style="width:33.33%;">${element.aocount}</span>
			</li>`;
				});
				processHtml += '</ul>';

				const $processTd = $(".process-td");

				$processTd.html(processHtml);

				var containerHeight = $processTd.height();
				var itemHeight = $processTd.find('li').outerHeight(true);

				if (processList.length > Math.round(containerHeight / itemHeight)) {
					let a = 0;
					const ls = $processTd.find('li').length;
					scrollInterval = setInterval(function () {
						a++;
						if (a >= ls) {
							clearInterval(scrollInterval);
							// 重置滚动位置
							$processTd.find('ul').stop().css({ marginTop: 0 });
							// 触发数据刷新
							tableScroll();
						} else {
							$processTd.find('ul').stop().animate({ marginTop: -itemHeight * a }, 1000, 'linear');
						}
					}, 2500);
				}
			};

			const tableScroll = () => {
				fetchData()
					.then(processList => {
						updateTable(processList);
					})
					.catch(err => {
						console.error('获取数据失败:', err);
					});
			};

			tableScroll();

			// 设置定时器，每10分钟更新一次数据
			setInterval(tableScroll, 10 * 60 * 1000);
		});
	</script>
</body>

</html>